<template>
	<div class="w-[250px] m-auto pt-[40px]">
		<div class="relative w-full h-[124px] rounded-lg bg-bg-3">
			<div class="leader w-[204px] text-sm h-[22px] m-auto text-center">
				<span>{{ $t('slotsDetail.preLeader') }}</span>
			</div>
			<div class="pt-4">
				<account-avatar
					:data="formatAvatar(lastRankFirst?.avatar)"
					:userId="lastRankFirst?.userId"
					:toProfile="lastRankFirst?.userId ? true : false"
					class="m-auto"
					:width="54"></account-avatar>
				<div
					class="m-auto flex justify-center items-center text-sm"
					:class="{ 'cursor-pointer': lastRankFirst?.userId ? true : false }"
					@click="toProfile(lastRankFirst.userId)">
					<account-vip :level="lastRankFirst?.vip"></account-vip>
					<div class="user-info">
						<span class="text-t-1" v-if="!lastRankFirst.userId">{{ $t('slotspre.vacant') }}</span>
						<span class="text-t-1" v-else>
							{{ lastRankFirst?.nickName || lastRankFirst?.userName }}
						</span>
						<div class="text-primary" v-if="lastRankFirst.userId">
							<up-amount-slot :value="lastRankFirst.payout"></up-amount-slot>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="text-center my-5 text-t-1 text-base">
				<span>{{ $t('slotsDetail.preMostLeader') }}</span>
			</div>
			<div class="top-content w-full h-[208px]">
				<div>
					<account-avatar
						class="m-auto"
						:userId="lastTopThree[1]?.userId"
						:data="formatAvatar(lastTopThree[1]?.avatar)"
						:width="54"></account-avatar>
					<div class="flex items-center cursor-pointer" @click="toProfile(lastTopThree[1].userId)">
						<account-vip :level="lastTopThree[1]?.vip"></account-vip>
						<div class="text-xs ml-[2px]">
							<div class="name">{{ lastTopThree[1]?.nickName || lastTopThree[1]?.userName }}</div>
							<div class="count">
								<span class="text-primary">{{ lastTopThree[1]?.gameAccount }}</span>
								<span class="ml-[2px]">{{ $t('slotsDetail.slots') }}</span>
							</div>
						</div>
					</div>
				</div>
				<div>
					<account-avatar
						class="m-auto"
						:userId="lastTopThree[0]?.userId"
						:data="formatAvatar(lastTopThree[0]?.avatar)"
						:width="54"></account-avatar>
					<div class="flex items-center cursor-pointer" @click="toProfile(lastTopThree[0].userId)">
						<account-vip :level="lastTopThree[0]?.vip"></account-vip>
						<div class="text-xs ml-[2px]">
							<div class="name">{{ lastTopThree[0]?.nickName || lastTopThree[0]?.userName }}</div>
							<div class="count">
								<span class="text-primary">{{ lastTopThree[0]?.gameAccount }}</span>
								<span class="ml-[2px]">{{ $t('slotsDetail.slots') }}</span>
							</div>
						</div>
					</div>
				</div>
				<div>
					<account-avatar
						class="m-auto"
						:userId="lastTopThree[2]?.userId"
						:data="formatAvatar(lastTopThree[2]?.avatar)"
						:width="54"></account-avatar>
					<div class="flex items-center cursor-pointer" @click="toProfile(lastTopThree[2].userId)">
						<account-vip :level="lastTopThree[2]?.vip"></account-vip>
						<div class="text-xs ml-[2px]">
							<div class="name">{{ lastTopThree[2]?.nickName || lastTopThree[2]?.userName }}</div>
							<div class="count">
								<span class="text-primary">{{ lastTopThree[2]?.gameAccount }}</span>
								<span class="ml-[2px]">{{ $t('slotsDetail.slots') }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div
				class="text-center text-primary-hover cursor-pointer mt-[33px] leading-[16px] text-sm"
				@click="onClick">
				{{ $t('slotsDetail.viewPrize') }}
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import AccountVip from '@/components/account/account-vip/index.vue'
import { UpAmountSlot, UpSwitchTabsEnum } from '@/components/up'
import AccountAvatar from '@/components/account/account-avatar/index.vue'
import { SlotDetailInfo } from '@/types'
import { useProfileStore } from '@/store'
import { goDetails } from '@/utils'

const profileStore = useProfileStore()
defineProps({
	lastRankFirst: {
		type: Object,
		default: () => ({})
	},
	lastTopThree: {
		type: Array<SlotDetailInfo>,
		default: () => []
	}
})

const toProfile = (val: any) => {
	if (!val) return
	console.log(val)
	if (val) {
		profileStore.showProfile({
			show: true,
			userId: val,
			tab: UpSwitchTabsEnum.slots
		})
	}
}

const formatAvatar = (val: string) => {
	let avatar = null
	if (val) {
		avatar = JSON.parse(val)
	}
	if (avatar?.key) {
		avatar.key = JSON.parse(avatar.key)
	}
	console.log(avatar)
	return avatar
}

const onClick = () => {
	goDetails('promo-king-of-slots-leaderboard')
}
</script>
<style lang="scss" scoped>
.leader {
	background-image: url('@/assets/img/slots/leader-bg2.svg');
	background-size: contain;
	background-repeat: no-repeat;
	line-height: 20px;
	position: absolute;
	left: 50%;
	top: -12px;
	transform: translateX(-50%);
}
.top-content {
	background-image: url('@/assets/img/slots/top3-bg.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;
	display: flex;
	& > div {
		width: 33.33%;
		flex-direction: column;
		justify-content: flex-end;
		&:nth-child(1) {
			margin-top: 22px;
		}
		&:nth-child(2) {
			margin-top: 0px;
		}
		&:nth-child(3) {
			margin-top: 33px;
		}
		.name {
			max-width: 56px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.count {
			max-width: 56px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
</style>
